<template>
  <div>
    <max-panel title="基础使用：">
      <max-table/>
    </max-panel>
    <max-panel title="列表模式：">
      <max-table mode="list"
                 :columns="columns"
                 :rows="rows"
                 :total="total"/>
    </max-panel>
    <max-panel title="分页模式：">
      <max-table mode="page"
                 :columns="columns"
                 :rows="rows"
                 :total="total"/>
    </max-panel>
  </div>
</template>

<script>

import {defineComponent, ref, reactive, toRaw} from "vue";

export default defineComponent({
  setup() {
    /**
     * 参数列表：
     * columns：表格列配置
     * rows：表格数据行数
     * total：表格数据行数
     */
    const columns = reactive([
      {
        title: '主键编号',
        dataIndex: 'id',
        align: 'center',
        tableShow: true,
        formShow: true,
        formType: 'Long',
        disabled: true
      },
      {
        title: '字符测试',
        dataIndex: 'string',
        align: 'center',
        tableShow: true,
        formShow: true,
        formType: 'String',
      },
      {
        title: '数字测试',
        dataIndex: 'integer',
        align: 'center',
        tableShow: true,
        formShow: true,
        formType: 'Integer',
      },
      {
        title: '布尔测试',
        dataIndex: 'boolean',
        align: 'center',
        tableShow: true,
        formShow: true,
        formType: 'Boolean',
        disabled: true

      },
      {
        title: '单选测试',
        dataIndex: 'select',
        align: 'center',
        tableShow: true,
        formShow: true,
        formType: 'Select',
        options: [
          {
            id: '1',
            name: '单选1'
          },
          {
            id: '2',
            name: '单选2'
          },
        ],
      },
      {
        title: '级联测试',
        dataIndex: 'cascade',
        align: 'center',
        tableShow: true,
        formShow: true,
        formType: 'Cascade',
        placeholder: '级联选择',
        options: [
          {
            id: '1',
            name: '1',
            children: [
              {
                id: '1-1',
                name: '1-1',
                children: []
              },
              {
                id: '1-2',
                name: '1-2',
                children: []
              },
            ]
          },
          {
            id: '2',
            name: '2',
            children: []
          },
        ],
      }
    ]);
    const rows = reactive([
      {
        id: "1",
        string: "1",
        integer: 1,
        boolean: true,
        select: "1",
        Cascade: [],
      },
      {
        id: "1",
        string: "1",
        integer: 1,
        boolean: true,
        select: "1",
        Cascade: [],
      },
      {
        id: "1",
        string: "1",
        integer: 1,
        boolean: true,
        select: "1",
        Cascade: [],
      },
      {
        id: "1",
        string: "1",
        integer: 1,
        boolean: true,
        select: "1",
        Cascade: [],
      },
      {
        id: "1",
        string: "1",
        integer: 1,
        boolean: true,
        select: "1",
        Cascade: [],
      },
    ]);
    const total = ref("1");
    /**
     * 方法列表：
     */

    return {
      columns,
      rows,
      total
    };
  }
});
</script>
<style scoped>
</style>